<template>
    <block title="大棚内环境">
        <div class="list">
            <div @click="select(1)" class="item">
                <div class="label">空气温度（℃）</div>
                <div class="val">16.5</div>
            </div>
            <div @click="select(2)" class="item">
                <div class="label">空气湿度（%）</div>
                <div class="val">60.9</div>
            </div>
            <div @click="select(3)" class="item">
                <div class="label">二氧化碳浓度（PPM）</div>
                <div class="val">580</div>
            </div>

            <div @click="select(4)" class="item">
                <div class="label">光照（wlx）</div>
                <div class="val">15</div>
            </div>
        </div>
        <div ref="chart" class="chart-p"></div>
    </block>
</template>
<script setup lang="ts">
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';

const chart = ref()
const btnType = ref(0)
let myChart: echarts.ECharts
let data = [10, 9, 8, 6, 8, 12, 9]
let unit = '℃'
const select = (a: number) => {
    myChart.dispose()
    if (a == 1) {
        unit = '℃'
        data = [10, 9, 8, 6, 8, 12, 9]
        initChart()
    } else if (a == 2) {
        unit = '%'
        data = [16, 19, 21, 32, 19, 18, 17]
        initChart()
    } else if (a == 3)  {
        unit = 'ppm'
        data = [122, 236, 189, 137, 263, 36, 369]
        initChart()
    } else {
        unit = 'wlx'
        data = [122, 236, 189, 137, 263, 36, 369]
        initChart()
    }
}

const initChart = () => {
    myChart = echarts.init(chart.value);
    var option;

    option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '25%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            axisLabel: {
                color: '#fff' // 设置X轴标签颜色为绿色
            }
        },
        yAxis: {
            type: 'value',
            name: '单位：' + unit,
            nameTextStyle: {
                color: '#fff'
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        },
        series: [
            {
                data: data,
                type: 'line',
                smooth: true,
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }],
                    label: {
                        color: '#fff',
                        position: 'insideEndTop'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}



onMounted(() => {
    initChart()
})



</script>
<style scoped>
.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

}

.item {
    border-bottom: 1px solid #c9ea5b66;
    width: 50%;
    height: 10vh;
    box-sizing: border-box;
    cursor: pointer;
}

.item:nth-child(odd) {
    border-right: 1px solid #c9ea5b66;
}

.label {
    text-align: center;
    color: #68d562;
    font-size: 1.5vh;
    padding: 1.5vh 0 0 0;
}

.val {
    text-align: center;
    color: #c1de74;
    font-size: 3vh;
    font-weight: bold;
}

.chart-p {
    height: 20vh;
}
</style>